<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 2D转换</title>
	<style>
		html, body {
			height: 100%;
		}

		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

		section {
			height: 100%;
			background-color: #DE8910;
			position: relative;
		}

		.rocket {
			width: 100px;
			height: 190px;
			position: absolute;
			bottom: 0;
			transform: translate(100px, 175px) rotate(30deg);
			transition: all 1s ease-in-out;
		}

		section:hover .rocket {
			transform: translate(960px, -250px) rotate(30deg);
		}

	</style>
</head>
<body>
	<section>
		<div class="rocket">
			<img src="./images/rocket.png" alt="">
		</div>		
	</section>
</body>
</html>